<template>
  <!--<div>
    区域综合图
  </div>-->
  <div style="position: relative;height: 100%;" v-loading="loading">
    <!--图层选择-->
    <div style="padding:20px;">
      <span style="color:#606266;">可选图层：</span>
      <div style="position: relative;margin-left: 73px;margin-top: -25px;">
        <el-checkbox v-model="checkBool9" label="活断层避让分布图（100米）" @change="changeCheckBox9" />
        <el-checkbox v-model="checkBool10" label="活断层避让分布图（200米）" @change="changeCheckBox10" />
        <el-checkbox v-model="checkBool1" label="抗震加固工程分布图（新建工程）" @change="changeCheckBox1" />
        <el-checkbox v-model="checkBool2" label="抗震加固工程分布图（加固工程）" @change="changeCheckBox2" />
        <el-checkbox v-model="checkBool3" label="全国地震灾害风险区划图（抗震能力）" @change="changeCheckBox3" />
        <el-checkbox v-model="checkBool4" label="全国地震灾害风险区划图（人员伤亡）" @change="changeCheckBox4" />
        <el-checkbox v-model="checkBool5" label="全国地震灾害风险区划图（经济损失）" @change="changeCheckBox5" />
        <el-checkbox v-model="checkBool6" label="房屋加固优先级区划图" @change="changeCheckBox6" />
        <el-checkbox v-model="checkBool7" label="重点隐患分布图（房屋住宅）" @change="changeCheckBox7" />
        <el-checkbox v-model="checkBool8" label="重点隐患分布图（市政桥梁）" @change="changeCheckBox8" />
      </div>
      <el-row>
        <el-col>
          <span style="color:#606266;">所在区域：</span>
          <el-select v-model="queryParams.province" placeholder="所在省" @change="chooseProvince" clearable value-key="id"
                     style="width:200px;">
            <el-option key="全国级" label="全国" value="全国级"></el-option>
            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
          <el-select v-model="queryParams.city" placeholder="所在市" @change="chooseCity"
                     style="width:200px;;" value-key="id" clearable :disabled="queryParams.province=='全国级'">
            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
          <el-select v-model="queryParams.county" placeholder="所在区/县" @change="chooseCounty" style="width:200px;"
                     value-key="id" clearable :disabled="queryParams.province=='全国级'">
            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
          <el-button type="primary" @click="handleQuery" style="margin-left:20px;">搜索</el-button>
          <!--          <el-button @click="resetQuery">重置</el-button>-->
        </el-col>
      </el-row>
    </div>
    <!--地图模块-->
    <IndexMapRegion v-if="showBool" @getLayerReturnType="getLayerReturnType"
           :formSqlFilter1="formSqlFilter1" :formSqlFilter2="formSqlFilter2"
           :formSqlFilter3="formSqlFilter3" :formSqlFilter4="formSqlFilter4"
           :formSqlFilter5="formSqlFilter5" :formSqlFilter6="formSqlFilter6"
           :formSqlFilter7="formSqlFilter7" :formSqlFilter8="formSqlFilter8"
           :formSqlFilter9="formSqlFilter9" :formSqlFilter10="formSqlFilter10"
           :queryParams="queryParams" :queryFlag="queryFlag" @returnQueryFlag="returnQueryFlag"
    ></IndexMapRegion>
  </div>
</template>

<script setup name="regionalSynthesis">
//地图
import IndexMapRegion from '@/map/thematicMap/synthesis/regionalSynthesis/index.vue';
import {getSingle} from '@/api/thematicMap/divisionClass/earthquakeDisasterRisk.js';
import { getProvince, getChildArea } from "@/api/system/division";

const { proxy } = getCurrentInstance();

//类型
const data = reactive({
  loading:false,
  queryCount:0,//查询图层数量
  currentCount:0,//当前完成图层计数
  queryParams:{
    province:'',
    city:'',
    county:'',
  },
  provinceData:[],
  cityData:[],
  areaData:[],
  queryRegion:"",//省市县查询区域
  checkBool1:false,//抗震加固工程分布图（新建）
  formSqlFilter1: {
    dataType:"新建工程",
    show:false,
    region:""
  },
  checkBool2:false,//抗震加固工程分布图（加固）
  formSqlFilter2:{
    dataType:"加固工程",
    show:false,
    region:""
  },
  checkBool3:false,//全国地震灾害风险区划图（抗震能力）
  formSqlFilter3:{
    dataType:"singleRiskZonationConfirm",
    // level2DataType:"singleRiskZonationConfirmKznl",
    level3DataType:"singleRiskZonationConfirmKznl",
    assessType:"seismicEd",
    range:{},//四个临界值设置;新疆、青海和西藏地区四个临界值设置
    show:false,
    region:""
  },
  checkBool4:false,//全国地震灾害风险区划图（人员伤亡）
  formSqlFilter4:{
    dataType:"singleRiskZonationConfirm",
    // level2DataType:"singleRiskZonationConfirmRk",
    level3DataType:"singleRiskZonationConfirmRk",
    assessType:"personCasualtiesEd",
    range:{},//四个临界值设置;新疆、青海和西藏地区四个临界值设置
    show:false,
    region:""
  },
  checkBool5:false,//全国地震灾害风险区划图（经济损失）
  formSqlFilter5:{
    dataType:"singleRiskZonationConfirm",
    // level2DataType:"singleRiskZonationConfirmJj",
    level3DataType:"singleRiskZonationConfirmJj",
    assessType:"economicLossesEd",
    range:{},//四个临界值设置;新疆、青海和西藏地区四个临界值设置
    show:false,
    region:""
  },
  checkBool6:false,//房屋加固优先级区划图
  formSqlFilter6:{
    level2DataType:"fwjgyxjsj",//数据类别二级code
    level3DataType:"fwjgyxjd",//数据类别三级code
    show:false,
    region:""
  },
  checkBool7:false,//重点隐患分布图（房屋住宅）
  formSqlFilter7:{
    level2DataType:"zdyhsj",//数据类别二级code
    level3DataType:"zdyhfwm",//数据类别三级code
    show:false,
    region:""
  },
  checkBool8:false,//重点隐患分布图（市政桥梁）
  formSqlFilter8:{
    level2DataType:"zdyhsj",//数据类别二级code
    level3DataType:"zdyhszx",//数据类别三级code
    show:false,
    region:""
  },
  checkBool9:false,//活断层避让分布图（100米）
  formSqlFilter9:{
    level2DataType:"activeFaultAvoidance",//数据类别二级code
    level3DataType:"activeFaultAvoidance100",//数据类别三级code
    show:false,
    region:""
  },
  checkBool10:false,//活断层避让分布图（200米）
  formSqlFilter10:{
    level2DataType:"activeFaultAvoidance",//数据类别二级code
    level3DataType:"activeFaultAvoidance200",//数据类别三级code
    show:false,
    region:""
  },
})
const { loading,queryCount,currentCount,queryParams,provinceData,cityData,areaData,queryRegion,
  checkBool1,formSqlFilter1,checkBool2,formSqlFilter2,checkBool3,formSqlFilter3,checkBool4,formSqlFilter4,
  checkBool5,formSqlFilter5,checkBool6,formSqlFilter6,checkBool7,formSqlFilter7,checkBool8,formSqlFilter8,
  checkBool9,formSqlFilter9,checkBool10,formSqlFilter10 } = toRefs(data)
const showBool = ref(false);

const form1 = ref({});//抗震能力/极限状态四个临界值设置
const form2 = ref({});//死亡人数四个临界值设置
const form3 = ref({});//直接经济损失/区域内上年度 GDP四个临界值设置
//根据类型查询四个临界值设置
const getSingleData = (type) => {
  getSingle({ type }).then(res => {
    if (res.code == 200) {
      if (type == '1') {
        form1.value = res.data
      } else if (type == '2') {
        form2.value = res.data
      } else {
        form3.value = res.data
      }
    }
  })
}

//抗震加固工程分布图（新建工程）
function changeCheckBox1(bool){
  formSqlFilter1.value = {
    dataType:"新建工程",
    show:bool,
    region:queryRegion.value
  };
}

//抗震加固工程分布图（加固工程）
function changeCheckBox2(bool){
  formSqlFilter2.value = {
    dataType:"加固工程",
    show:bool,
    region:queryRegion.value
  };
}

//全国地震灾害风险区划图（抗震能力）
function changeCheckBox3(bool){
  formSqlFilter3.value = {
    dataType:"singleRiskZonationConfirm",
    // level2DataType:"singleRiskZonationConfirmKznl",
    level3DataType:"singleRiskZonationConfirmKznl",
    assessType:"seismicEd",
    range:form1.value,//四个临界值设置
    show:bool,
    region:queryRegion.value
  };
}

//全国地震灾害风险区划图（人员伤亡）
function changeCheckBox4(bool){
  formSqlFilter4.value = {
    dataType:"singleRiskZonationConfirm",
    // level2DataType:"singleRiskZonationConfirmRk",
    level3DataType:"singleRiskZonationConfirmRk",
    assessType:"personCasualtiesEd",
    range:form2.value,//四个临界值设置;新疆、青海和西藏地区四个临界值设置
    show:bool,
    region:queryRegion.value
  };
}

//全国地震灾害风险区划图（经济损失）
function changeCheckBox5(bool){
  formSqlFilter5.value = {
    dataType:"singleRiskZonationConfirm",
    // level2DataType:"singleRiskZonationConfirmJj",
    level3DataType:"singleRiskZonationConfirmJj",
    assessType:"economicLossesEd",
    range:form3.value,//四个临界值设置;新疆、青海和西藏地区四个临界值设置
    show:bool,
    region:queryRegion.value
  };
}

//房屋加固优先级区划图
function changeCheckBox6(bool){
  formSqlFilter6.value = {
    level2DataType:"fwjgyxjsj",//数据类别二级code
    level3DataType:"fwjgyxjd",//数据类别三级code
    show:bool,
    region:queryRegion.value
  };
}

//重点隐患分布图（房屋住宅）
function changeCheckBox7(bool){
  formSqlFilter7.value = {
    level2DataType:"zdyhsj",//数据类别二级code
    level3DataType:"zdyhfwm",//数据类别三级code
    show:bool,
    region:queryRegion.value
  };
}

//重点隐患分布图（市政桥梁）
function changeCheckBox8(bool){
  formSqlFilter8.value = {
    level2DataType:"zdyhsj",//数据类别二级code
    level3DataType:"zdyhszx",//数据类别三级code
    show:bool,
    region:queryRegion.value,
  };
}

//活断层避让分布图（100米）
function changeCheckBox9(bool){
  formSqlFilter9.value = {
    level2DataType:"activeFaultAvoidance",//数据类别二级code
    level3DataType:"activeFaultAvoidance100",//数据类别三级code
    show:bool,
    region:queryRegion.value,
  };
}

//活断层避让分布图（200米）
function changeCheckBox10(bool){
  formSqlFilter10.value = {
    level2DataType:"activeFaultAvoidance",//数据类别二级code
    level3DataType:"activeFaultAvoidance200",//数据类别三级code
    show:bool,
    region:queryRegion.value,
  };
}

/** 获取省列表 */
function getProvinceData() {
  getProvince().then((response) => {
    provinceData.value = response.data;
  });
}
function chooseProvince(value) {
  console.log(value);
  queryParams.value.city = null;
  queryParams.value.county = null;
  queryParams.value.province = value=='全国级'?value:value.name;
  cityData.value = [];
  areaData.value = [];
  if(value=='全国级'){
    return;
  }
  getChildArea(value.id).then(response => {
    cityData.value = response.data;
  });
}
function chooseCity(value) {
  queryParams.value.city = value.name;
  queryParams.value.county = null;
  areaData.value = [];
  getChildArea(value.id).then((response) => {
    areaData.value = response.data;
  });
}
function chooseCounty(value) {
  queryParams.value.county = value.name;
}

//完成图层返回值
const getLayerReturnType = (obj)=>{
  let count = currentCount.value;
  currentCount.value = ++count;
  if(count==queryCount.value){
    // loading.value = false;
    if(queryFlag.value==false){
      loading.value = false;
    }
  }
}

//完成省市县定位
const returnQueryFlag = ()=>{
  //完成省市县查询定位
  queryFlag.value = false;
  if(queryCount.value==10){
    loading.value = false;
  }
}

//获取行政区划区域：省-市-县
const getQueryCount = ()=>{
  let province = queryParams.value.province=='全国级'?'':queryParams.value.province;
  let city = queryParams.value.city?queryParams.value.city:"";
  let county = queryParams.value.county?queryParams.value.county:"";
  let region = "";
  if(province){
    region += province;
    if(city){
      region += "-" + city;
      if(county){
        region += "-" + county;
      }
    }
  }
  //查询行政区划区域：省-市-县
  queryRegion.value = region;
}
//是否开始省市县查询定位
const queryFlag = ref(false);
//搜索
const handleQuery = ()=>{
  loading.value = true;
  queryCount.value = 10;
  currentCount.value = 0;
  //开始省市县查询定位
  queryFlag.value = true;
  //获取行政区划区域：省-市-县
  getQueryCount();
  let count = 0;
  if(checkBool1.value){
    formSqlFilter1.value = {
      dataType:"新建工程",
      show:true,
      region:queryRegion.value
    };
  }else{
    count++;
  }
  if(checkBool2.value){
    formSqlFilter2.value = {
      dataType:"加固工程",
      show:true,
      region:queryRegion.value
    };
  }else{
    count++;
  }
  if(checkBool3.value){
    changeCheckBox3(true);
  }else{
    count++;
  }
  if(checkBool4.value){
    changeCheckBox4(true);
  }else{
    count++;
  }
  if(checkBool5.value){
    changeCheckBox5(true);
  }else{
    count++;
  }
  if(checkBool6.value){
    formSqlFilter6.value = {
      level2DataType:"fwjgyxjsj",//数据类别二级code
      level3DataType:"fwjgyxjd",//数据类别三级code
      show:true,
      region:queryRegion.value
    };
  }else{
    count++;
  }
  if(checkBool7.value){
    formSqlFilter7.value = {
      level2DataType:"zdyhsj",//数据类别二级code
      level3DataType:"zdyhfwm",//数据类别三级code
      show:true,
      region:queryRegion.value
    };
  }else{
    count++;
  }
  if(checkBool8.value){
    formSqlFilter8.value = {
      level2DataType:"zdyhsj",//数据类别二级code
      level3DataType:"zdyhszx",//数据类别三级code
      show:true,
      region:queryRegion.value,
    };
  }else{
    count++;
  }
  if(checkBool9.value){
    formSqlFilter9.value = {
      level2DataType:"activeFaultAvoidance",//数据类别二级code
      level3DataType:"activeFaultAvoidance100",//数据类别三级code
      show:true,
      region:queryRegion.value,
    };
  }else{
    count++;
  }
  if(checkBool10.value){
    formSqlFilter10.value = {
      level2DataType:"activeFaultAvoidance",//数据类别二级code
      level3DataType:"activeFaultAvoidance200",//数据类别三级code
      show:true,
      region:queryRegion.value,
    };
  }else{
    count++;
  }
  currentCount.value = count;
  if(count==10){
    if(queryFlag.value==false){
      loading.value = false;
    }
    let bool = checkBool1.value || checkBool2.value || checkBool3.value || checkBool4.value || checkBool5.value
        || checkBool6.value || checkBool7.value || checkBool8.value || checkBool9.value || checkBool10.value;
    if(bool==false){
      proxy.$modal.msgWarning('请至少勾选1个图层！');
    }
  }
}

//重置
const resetQuery = ()=>{
  queryParams.value={
    province:'',
    city:'',
    county:'',
  };
  queryRegion.value = "";
}

onMounted(() => {
  showBool.value = true;
  getProvinceData();
  //根据类型查询四个临界值设置
  // getSingleData('1');
  // getSingleData('2');
  // getSingleData('3');
})
</script>

<style scoped lang="scss">

</style>